<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs li").bind("click", function () {
                var index = $(this).index();
                var divs = $("#tabs-body > div");
                $(this).parent().children("li").attr("class", "tab-nav");//将所有选项置为未选中
                $(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式
                divs.hide();//隐藏所有选中项内容
                divs.eq(index).show(); //显示选中项对应内容
            });

        });
    </script>
</head>
<body>
<div class="tabs">
    <ul id="tabs">
        <li class="tab-nav">管理导航</li>
        <li class="tab-nav-action">系统设置</li>
        <li class="tab-nav">用户管理</li>
        <li class="tab-nav">内容管理</li>
        <li class="tab-nav">其他管理</li>
    </ul>
</div>
<div id="tabs-body" class="tabs-body">
    <div style="display:block">
        1111111
    </div>
    <div style="display:none">
        222222222
    </div>
    <div style="display:none">
        33333333333
    </div>
    <div style="display:none">
        4444444444
    </div>
    <div style="display:none">
        555555555555555
    </div>
</div>
</body>
</html>